<template>
  <div class="manage" style="width: 1200px;margin: 0 auto;height:100%">
    <!-- 管理页 -->
    <el-tabs type="border-card">
      <el-tab-pane label="系统管理">
        <div
          class="system-manage-container"
          style="display: flex;width:100%;justify-content:space-around"
        >
          <div class="left">
            <el-card class="box-card" style="margin-top:10px;width: 550px">
              <div slot="header" class="clearfix">
                <span class="title">标签管理</span>
              </div>
              <!-- 标签管理 -->
              <div class="buttons" style="margin-bottom: 10px">
                <el-button @click="AddTagDialog" size="small" type="primary">添加标签</el-button>
              </div>
              <el-table :data="tagTableData" height="600" style="width: 100%" size="medium" >
                <el-table-column type="index"  label="序号" sortable width="150"></el-table-column>
                <el-table-column prop="tagName" label="标签名"></el-table-column>
                <el-table-column width="210" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      @click="tagEditDialog(tagTableData[scope.$index].tagId)"
                      type="primary"
                      size="small"
                    >编辑</el-button>
                    <el-button
                      @click="deleteTag(tagTableData[scope.$index].tagId)"
                      type="danger"
                      size="small"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 
                  <div class="paginationbox">
                  <el-pagination
                    :page-size="tagConfig.pageSize"
                    :pager-count="11"
                    layout="prev, pager, next"
                    @current-change="handleCurrentTagChange"
                    :current-page="tagConfig.currentPage"
                    :total="100"
                  ></el-pagination>
                </div>
              --->
            </el-card>
          </div>
          <div class="right">
            <div class="top">
              <el-card style="margin-top:10px;width:550px">
                <div slot="header" class="clearfix">
                  <span class="title">各类型在检索中的权重占比</span>
                </div>
                <div class="block">
                  <span class="demonstration">标题</span>
                  <el-slider v-model="value0" @change="com" show-input></el-slider>
                </div>
                <div class="block">
                  <span class="demonstration">标签</span>
                  <el-slider v-model="value1" @change="com" show-input></el-slider>
                </div>
                <div class="block">
                  <span class="demonstration">文章类型</span>
                  <el-slider v-model="value2" @change="com" show-input></el-slider>
                </div>
                <div class="block">
                  <span class="demonstration">时间</span>
                  <el-slider v-model="value3" @change="com" show-input></el-slider>
                </div>
                <div class="block">
                  <span class="demonstration">作者</span>
                  <el-slider v-model="value4" @change="com" show-input></el-slider>
                </div>
                <el-button type="primary" size="small" @click="searchWeight">确定修改</el-button>
              </el-card>
            </div>
            <div class="bottom" style="margin-top: 30px;">
              <el-card class="box-card" style="width: 550px;">
                <div slot="header" class="clearfix">
                  <span class="title">文章自动保存的时间</span>
                </div>
                <div class="block">
                  <span class="demonstration">时间占比</span>
                  <el-slider v-model="value5" show-input></el-slider>
                </div>
                <el-button type="primary" size="small" @click="saveTime">确定修改</el-button>
              </el-card>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="人员管理">
        <el-card class="box-card" style="margin-top:-20px;margin-left:-20px;width: 1220px;">
          <div slot="header" class="clearfix">
            <span class="title">账号管理</span>
          </div>
          <!-- 账号管理 -->
          <div class="buttons" style="margin-bottom: 10px">
            用户名
            <el-input
              v-model="search"
              style="width: 200px;margin-right: 20px;padding-left: 5px"
              placeholder="请输入用户名"
            ></el-input>
            <el-button type="primary" style="margin-right: 5px" @click="getUserInfo" size="small">搜索</el-button>
            <el-button style="margin-right: 20px" @click="search=''" size="small">重置</el-button>
            <el-button @click="AddPersonDialog" type="primary" size="small">添加用户</el-button>
          </div>
          <el-table :data="accountTableData" height="610" style="width: 100%" >
            <el-table-column prop="userId" label="ID" width="80" align="center"></el-table-column>
            <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
            <el-table-column prop="roleName" label="用户角色" width="200" align="center">
              <template slot-scope="scope">
                <el-tag
                  v-if="accountTableData[scope.$index].roleName==='普通用户' "
                  effect="dark"
                  type="success"
                  size="small"
                >普通用户</el-tag>
                <el-tag
                  v-if="accountTableData[scope.$index].roleName==='审核员' "
                  effect="dark"
                  type="info"
                  size="small"
                >审核员</el-tag>
                <el-tag
                  v-if="accountTableData[scope.$index].roleName==='管理员' "
                  effect="dark"
                  type="warning"
                  size="small"
                >管理员</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="status" label="用户状态" width="200" align="center">
              <template slot-scope="scope">
                <el-tag
                  v-if="accountTableData[scope.$index].status==='1' "
                  effect="dark"
                  type="danger"
                  size="small"
                >禁用</el-tag>
                <el-tag
                  v-if="accountTableData[scope.$index].status==='0' "
                  effect="dark"
                  type="success"
                  size="small"
                >启用</el-tag>
              </template>
            </el-table-column>

            <el-table-column width="250" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="EditPersonDialog(accountTableData[scope.$index].userId)"
                  size="small"
                  type="primary"
                >编辑</el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="deletePerson(accountTableData[scope.$index].userId)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="paginationbox">
            <el-pagination
              :page-size="accountConfig.pageSize"
              :pager-count="11"
              layout="prev, pager, next"
              @current-change="handleCurrentPersonChange"
              :current-page="accountConfig.currentPage"
              :total="1000"
            ></el-pagination>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <!-- 新增用户 -->
    <el-dialog title="添加用户" :visible.sync="addPersonDialogVisible" width="30%"
             :before-close="addPersonclose">
    <el-form ref="addPersonform" :rules="addPersonrules" :model="addPersonform" label-width="80px">
      <el-form-item prop="name" label="用户名">
        <el-input v-model="addPersonform.name"></el-input>
      </el-form-item>
      <el-form-item prop="role" label="用户角色">
        <el-select style="width:100%" v-model="addPersonform.role" placeholder="请选择用户角色">
          <el-option label="管理员" value="2"></el-option>
          <el-option label="审核员" value="1"></el-option>
          <el-option label="普通用户" value="0"></el-option>
        </el-select>
      </el-form-item>
      <!--            <el-form-item prop="nickName" label="昵称">-->
      <!--                <el-input v-model="form.nickName"></el-input>-->
      <!--            </el-form-item>-->
      <el-form-item prop="password" label="密码">
        <el-input type="password" v-model="addPersonform.password"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
            <el-button @click="addPersonclose">取 消</el-button>
            <el-button type="primary" @click="addPersonsubmit">确 定</el-button>
        </span>
  </el-dialog>
    <!-- 新增标签 -->
    <el-dialog title="新增标签" :visible.sync="addTagDialogVisible" width="30%" :before-close="AddTagclose">
      <el-form ref="AddTagform" :rules="AddTagrules" :model="AddTagform" label-width="80px">
        <el-form-item label="标签名" prop="tagName">
          <el-input v-model="AddTagform.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddTagclose">取 消</el-button>
        <el-button type="primary" @click="AddTagsubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑标签 -->
    <el-dialog title="编辑标签" :visible.sync="editTagDialogVisible" width="30%"
             :before-close="EditTagclose">
    <el-form ref="EditTagform" :rules="EditTagrules" :model="EditTagform" label-width="80px">
      <el-form-item label="标签名" prop="tagName">
        <el-input v-model="EditTagform.tagName"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
            <el-button @click="EditTagclose">取 消</el-button>
            <el-button type="primary" @click="EditTagsubmit">确 定</el-button>
        </span>
  </el-dialog>
    <!-- 编辑用户 -->
    <el-dialog title="编辑用户" :visible.sync="editPersonDialogVisible" width="30%" :before-close="editPersonclose">
    <el-form ref="editPersonform" :rules="editPersonrules" :model="editPersonform" label-width="80px">
      <el-form-item prop="name" label="用户名">
        <el-input v-model="editPersonform.name"></el-input>
      </el-form-item>
      <el-form-item prop="role" label="用户角色">
        <el-select style="width:100%" v-model="editPersonform.role" placeholder="请选择用户角色">
          <el-option label="管理员" value="2" ></el-option>
          <el-option label="审核员" value="1" ></el-option>
          <el-option label="普通用户" value="0" ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="editPersonclose">取 消</el-button>
      <el-button type="primary" @click="editPersonsubmit">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import {
  FindAdminTagByPage,
  FindAdminUserByPage,
  FindAdminTag,
  FindAdminUser,
  FindAdminUserBySearch,
  EditTag,
  AddTag,
  DeleteTag,
  SearchWeight,
  DeleteUser,
  autoSaveTime,
  getAllTags,
  AddUser,
  EditUser
} from "../../apis/apis";
import { computed } from "vue";
import { dataTool } from "echarts";
import { Message } from "element-ui";
@Component({
  name: "FindPassword",
})
export default class admin extends Vue {
  addPersonDialogVisible: boolean = false;
  addTagDialogVisible: boolean = false;
  editTagDialogVisible: boolean = false;
  editPersonDialogVisible: boolean = false;
   //新增标签对话框
   AddTagDialog(): void {
    this.addTagDialogVisible = true;
  }
  AddTagform= {
    tagName: ''
  }
  AddTagrules={
    tagName: [
      { required: true, message: '请输入标签名', trigger: 'blur' }
    ]
  }
  AddTagclose():void{
    this.addTagDialogVisible=false;
  }
  AddTagsubmit():void{
    AddTag(this.AddTagform.tagName).then((res: any) =>{
      if(res.data.code==='200'){
        Message({
          message: '添加成功',
          type: 'success'
        });
        this.addTagDialogVisible=false;
        this.AdminGetTagData();
       // this.$emit('addTag');
      }
    }).catch((err) =>{
      console.log(err);
   })
  }
oldTagId:number=0
    //编辑标签
   tagEditDialog(tagid: number) {
    this.oldTagId = tagid;
    this.editTagDialogVisible = true;
  }
  EditTagform= {
    tagName: ''
  }
  EditTagrules={
    tagName: [
      { required: true, message: '请输入标签名', trigger: 'blur' }
    ]
  }
  EditTagclose():void{
    this.editTagDialogVisible = false
  }
  EditTagsubmit():void{
    const newTag = this.EditTagform.tagName
    //var a = this.oldTagId
   //
    EditTag(this.oldTagId,newTag).then((res)=>
    {
      if(res.data.code === '200')
      {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.EditTagclose();
        this.AdminGetTagData();
        //this.AdminGetAccountData();
      }
      else
      {
        this.$message({
          message: '修改失败',
          type: 'error'
        });
      }
    }).catch((err) =>{
      console.log(err);
   })

  }
  handleSizeChange: any;
  handleCurrentChange: any;
  //新增用户对话框
  AddPersonDialog(): void {
    this.addPersonDialogVisible = true;
  }
  addPersonform={
    name: '',
    role: '',
    // nickName: '',
    password: '',
  }
  addPersonrules={
    name: { required: true, message: '请输入用户名', trigger: 'blur' },
    role: { required: true, message: '请选择用户角色', trigger: 'change' },
    // nickName: { required: true, message: '请输入昵称', trigger: 'blur' },
    password: { required: true, message: '请输入密码', trigger: 'blur' },
  }
  addPersonclose():void {
    this.addPersonDialogVisible = false
  }
  addPersonsubmit():void{
    let n = Number(this.addPersonform.role)
    AddUser(this.addPersonform.name,n ,this.addPersonform.password).then((res:any)=>
    {
      if(res.data.code==='200')
      {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
      }
      this.addPersonDialogVisible = false
      this.AdminGetAccountData();
    }
    ).catch((err) =>{
      console.log(err);
   })
  }

  //编辑用户
  EditPersonDialog(userId: number) {
    this.oldId = userId;
    this.editPersonDialogVisible = true;
  }
  editPersonform = {
    name: '',
    role: '',
    status: '',
    // nickName: '',
    // password: '',
  };
  editPersonrules = {
    name: { required: true, message: "请输入用户名", trigger: "blur" },
    role: { required: true, message: "请选择用户角色", trigger: "change" }
    // nickName: { required: true, message: '请输入昵称', trigger: 'blur' },
    //password: { required: true, message: '请输入密码', trigger: 'blur' },
  };
  editPersonclose(): void {
    this.editPersonDialogVisible = false;
    console.log("关闭成功");
  }
  editPersonsubmit(): void {
    let b = Number(this.editPersonform.role)
    
    EditUser(this.editPersonform.name,b,this.oldId).then((res: any) => {
     if(res.data.code==='200')
      {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
      }
      this.editPersonDialogVisible = false
      this.AdminGetAccountData();
    }).catch((err) =>{
      console.log(err);
   })

  }

  value0: number = 50;
  value1: number = 50;
  value2: number = 50;
  value3: number = 50;
  value4: number = 50;
  value5: number = 30;
  total: number = 250;

  num0: number = 0;
  num1: number = 1;
  num2: number = 2;
  num3: number = 3;
  num4: number = 4;

  deleteTag(id: number) {
    //删除标签
    DeleteTag(id).then((res: any) => {

      if (res.data.code == "200") {
        this.$message({
          message: "删除成功",
          type: "success"
        });
      } else {
        this.$message({
          message: "删除失败",
          type: "error"
        });
      }
    });
  }
  search: string = "";
  scope: any;
  TagId: number = 0;
  oldId: number = 1;

  tagTableData = [
    {
      tagId: 1,
      tagName: "IT相关"
    },
    {
      tagId: 2,
      tagName: "生活"
    }
  ];

  tagConfig = {
    currentPage: 1,
    pageSize: 10,
    total: 1000
  };

  accountTableData = [
    {
     userId: 1,
     userName: "qwe",
     roleName: "",
     status: ""
    }
  ];

  accountConfig = {
    currentPage: 1,
    pageSize: 10,
    total: 1000
  };
  //

  tagnRow: any = null;
  personRow: any = null;
  accountHandleSizeChange: any;
  accountHandleCurrentChange: any;


  //addTagDialogVisible = true;tagnRow = null

  //删除用户
  deletePerson(userId: number) {
    DeleteUser(userId)
      .then((res: any) => {
        console.log(res.data);
        if (res.data.code === "200") {
          this.$message({
            message: "删除成功",
            type: "success"
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  }
  //根据用户名查找
  getUserInfo() {
    FindAdminUserBySearch(
      this.search,
      this.accountConfig.currentPage,
      this.accountConfig.pageSize
    ).then((res: any) => {
      this.accountTableData = res.data.data;
    });
  }

  //人员管理分页查询
  handleCurrentPersonChange(val: number): void {
    this.accountConfig.currentPage = val;
    FindAdminUserByPage(
      this.accountConfig.currentPage,
      this.accountConfig.pageSize
    )
      .then((res: any) => {
        this.accountTableData = res.data.data;
      })
      .catch(err => {
        console.log(err);
      });
  }

  //标签管理分页查询
  handleCurrentTagChange(val: number): void {
    this.tagConfig.currentPage = val;
    FindAdminTagByPage(this.tagConfig.currentPage, this.tagConfig.pageSize)
      .then((res: any) => {
        console.log(res.data.data);
        //this.accountTableData = res.data.data.tagTableData;
      })
      .catch(err => {
        console.log(err);
      });
  }

  //初始获取所有人员信息
  AdminGetAccountData(): void {
    FindAdminUserByPage(
      this.accountConfig.currentPage,
      this.accountConfig.pageSize
    )
      .then((res: any) => {
        // console.log(res.data.data);
        this.accountTableData = res.data.data;
      })
      .catch(err => {
        console.log(err);
      });
  }

  //初始获取所有标签
  AdminGetTagData(): void {
    // console.log(this.tagConfig.currentPage);
    // console.log(this.tagConfig.pageSize);
    getAllTags()
      .then((res: any) => {
        // console.log(res.data.data);
        this.tagTableData = res.data.data;
      })
      .catch(err => {
        console.log(err);
      });
  }

  mounted() {
    this.AdminGetTagData();
    this.AdminGetAccountData();
    // console.log(this.accountConfig.currentPage);
  }

  //计算总数
  public get computedMsg() {
    return this.value0 + this.value1 + this.value2 + this.value3 + this.value4;
  }

  //计算
  com(): void {
    this.total = this.computedMsg;
    this.num0 = this.value0 / this.total;
    this.num1 = this.value0 / this.total;
    this.num2 = this.value0 / this.total;
    this.num3 = this.value0 / this.total;
    this.num4 = this.value0 / this.total;
  }

  //检索权重
  searchWeight(): void {
    SearchWeight(this.num0, this.num1, this.num2, this.num3, this.num4)
      .then((res: any) => {
        if (res.data.code == 200) {
          this.$message({
            message: "检索权重修改成功",
            type: "success"
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  }

  //自动保存
  saveTime(): void {
    console.log(this.value5);
    autoSaveTime(this.value5)
      .then((res: any) => {
        if (res.data.code == 200) {
          this.$message({
            message: "自动保存时间修改成功",
            type: "success"
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  }
}
</script>